<template>
  <view class="view-main">
    <map :latitude="latitude" :longitude="longitude" scale="16" show-location style="width: 100%; height: 30vh;">
      <image class="map-marker" :src="markerIcon"></image>
    </map>
    <view class="page-con">
      <view class="con-hd">
        <view class="choose-address" v-if="!addressInfo || !addressInfo.address" @click="chooseAddressView">
          选择收货地址 >
        </view>
        <view class="choose-address2" v-else>
          <view class="address2-l">
            <view class="address2-lhd">{{addressInfo.title}}</view>
            <view class="address2-lbd">{{addressInfo.address}}</view>
          </view>
          <view class="address2-r" @click="chooseAddressView">修改地址</view>
        </view>
      </view>
      <view class="con-bd">
        <view class="con-bd-item">
          <view class="con-bd-item-name">门牌号</view>
          <view class="con-bd-item-con">
            <input type="text" v-model="formData.detailAddress" placeholder="详细地址，例如1层101室"
              placeholder-class="input-placeholder" />
          </view>
        </view>
        <view class="con-bd-item">
          <view class="con-bd-item-name">标签</view>
          <view class="con-bd-item-con">
            <view :class="formData.lableName == item ? 'lable-item lable-item-on':'lable-item'"
              v-for="(item,index) in labelData" :key="index" @click="chooseLable(item)">{{item}}</view>
          </view>
        </view>
        <view class="con-bd-item">
          <view class="con-bd-item-name">联系人</view>
          <view class="con-bd-item-con con-bd-item-con2">
            <input type="text" v-model="formData.userName" placeholder="请填写收货人姓名"
              placeholder-class="input-placeholder" />
            <view class="con-bd-sex-box" @click="chooseSex(1)">
              <image class="choose-sex-icon" :src="formData.sexType == 1 ? sele2Icon : noseleIcon" mode=""></image>
              先生
            </view>
            <view class="con-bd-sex-box" @click="chooseSex(2)">
              <image class="choose-sex-icon" :src="formData.sexType == 2 ? sele2Icon : noseleIcon" mode=""></image>
              女士
            </view>
          </view>
        </view>
        <view class="con-bd-item">
          <view class="con-bd-item-name">手机号</view>
          <view class="con-bd-item-con">
            <input type="number" maxlength="11" v-model="formData.userPhone" placeholder="请填写收货人手机号码"
              placeholder-class="input-placeholder"/>
          </view>
        </view>
        <view class="con-bd-agree" @click="changeAgree">
          <image class="agreeicon" :src="agreeState ? seleIcon : noseleIcon" mode=""></image>
          <view class="agreetext">设为默认地址</view>
        </view>
        <view class="con-ft-btn"
          :class="{'con-ft-btn1':addressInfo && addressInfo.address,'con-ft-btn3':!addressInfo || !addressInfo.address}"
          @click="submitAddress">
          保存地址</view>
        <view class="con-ft-btn con-ft-btn2" @click="deleteAddress">删除地址</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        formData: {
          detailAddress: '',
          userName: '',
          userPhone: '',
          lableName: '家',
          sexType: 1, //1 先生 2 女士
        },
        labelData: ['家', '公司', '学校'],
        addressInfo: {}, //选中的地址信息
        agreeState: false, //是否是默认地址
        longitude: null,
        latitude: null,
        markerIcon: require('../../static/marker.png'),
        seleIcon: require('../../static/sele.png'),
        sele2Icon: require('../../static/sele2.png'),
        noseleIcon: require('../../static/no-sele.png'),
        oldObj: ''
      }
    },
    mounted() {
      this.getLocation()
    },
    methods: {
      //数据回显时使用此方法
      setData(obj) {
        this.oldObj = obj
        this.formData.detailAddress = obj.detailAddress
        this.formData.userName = obj.userName
        this.formData.userPhone = obj.userPhone
        this.formData.lableName = obj.lableName
        this.formData.sexType = obj.sexType
        this.addressInfo.title = obj.title
        this.addressInfo.address = obj.address
        this.addressInfo.latitude = obj.latitude
        this.addressInfo.longitude = obj.longitude
        this.agreeState = obj.agreeState
      },
      //获取当前的地理位置
      getLocation() {
        uni.showLoading({
          title: '正在获取定位中...',
        })
        uni.getLocation({
          type: 'gcj02',
          isHighAccuracy: true,
          geocode: 'true',
          highAccuracyExpireTime: 3500,
          success: (res) => {
            uni.hideLoading();
            this.longitude = res.longitude;
            this.latitude = res.latitude;
          },
          fail: (res) => {
            if (res.errMsg == "getLocation:fail auth deny") {
              uni.showModal({
                content: '检测到您没打开获取信息功能权限，是否去设置打开？',
                confirmText: "确认",
                cancelText: '取消',
                success: (res) => {
                  if (res.confirm) {
                    uni.openSetting({
                      success: (res) => {}
                    })
                  } else {
                    return false;
                  }
                }
              })
            }
          }
        })
      },
      //保存地址
      submitAddress() {
        if (!this.addressInfo.latitude) {
          uni.showToast({
            title: '请选择收货地址',
            icon: 'none'
          })
          return
        }
        if (!this.formData.detailAddress) {
          uni.showToast({
            title: '请输入门牌号',
            icon: 'none'
          })
          return
        }
        if (!this.formData.userName) {
          uni.showToast({
            title: '请输入联系人',
            icon: 'none'
          })
          return
        }
        if (!this.formData.userPhone) {
          uni.showToast({
            title: '请输入手机号',
            icon: 'none'
          })
          return
        }
        let obj = {
          ...this.formData,
          ...this.addressInfo
        }
        obj.agreeState = this.agreeState
        this.$emit('submit', obj)
      },
      //删除地址
      deleteAddress() {
        this.$emit('detele', this.oldObj)
      },
      //选择地址、修改编辑地址
      chooseAddressView() {
        uni.chooseLocation({
          success: res => {
            if (!res.name || !res.address || !res.latitude || !res.longitude) return
            let addressObj = {
              title: res.name,
              address: res.address,
              latitude: res.latitude,
              longitude: res.longitude
            }
            this.latitude = res.latitude
            this.longitude = res.longitude
            this.addressInfo = addressObj
          }
        });
      },
      //联系人性别选择
      chooseSex(type) {
        this.formData.sexType = type
      },
      //标签选择
      chooseLable(item) {
        this.formData.lableName = item
      },
      //点击隐私协议
      changeAgree() {
        this.agreeState = !this.agreeState
      }
    }
  }
</script>

<style scoped>
  .view-main {
    width: 100%;
    height: 100%;
    background: #f3f3f3;
  }

  .map-marker {
    width: 64rpx;
    height: 72rpx;
    position: absolute;
    top: 15vh;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .map-tip {
    font-size: 20rpx;
    color: #b6b6b6;
    line-height: 42rpx;
    padding: 0 20rpx;
    position: absolute;
    left: 50%;
    top: 30rpx;
    box-shadow: 0px 1px 10px 1px rgba(153, 153, 153, 0.34);
    background-color: #fff;
    border-radius: 4px;
    transform: translateX(-50%);
  }

  .poiss-box {
    width: 100%;
    padding: 20rpx 0;
    background-color: #FFFFFF;
    font-size: 26rpx;
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .poiss-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 48rpx);
    height: 100rpx;
    padding: 0 24rpx;
    border-bottom: 1px solid #f9f9f9;
  }

  .poiss-item-l {
    width: calc(100% - 184rpx);
  }

  .poiss-item-lhd {
    font-size: 32rpx;
    color: #333333;
    line-height: 48rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .poiss-item-lbd {
    font-size: 28rpx;
    color: #b6b6b6;
    line-height: 42rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .poiss-item-r {
    width: 36rpx;
    height: 36rpx;
    margin: 0 30rpx;
  }

  .primary-btn {
    width: 688rpx;
    height: 88rpx;
    margin: 0 auto;
    margin-top: 28rpx;
    background: #fba007;
    border-radius: 44rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 88rpx;
    text-align: center;
  }

  .page-con {
    width: 702rpx;
    height: 75vh;
    position: fixed;
    bottom: 0;
    left: 24rpx;
  }

  .con-hd {
    display: flex;
    align-items: center;
    width: 702rpx;
    height: 128rpx;
    margin: 0 auto;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(88, 102, 123, 0.2);
    border-radius: 24rpx;
  }

  .choose-address {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92%;
    height: 64rpx;
    margin: 0 auto;
    border-radius: 12rpx;
    border: 2rpx solid #fba007;
    font-size: 32rpx;
    color: #fba007;
  }

  .choose-address2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 48rpx);
    padding: 0 24rpx;
  }

  .address2-l {
    width: calc(100% - 184rpx);
  }

  .address2-lhd {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    line-height: 48rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .address2-lbd {
    font-size: 28rpx;
    color: #999999;
    line-height: 42rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .address2-r {
    width: 144rpx;
    height: 60rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    border: 2rpx solid #fba007;
    font-size: 28rpx;
    color: #fba007;
    line-height: 60rpx;
    text-align: center;
  }

  .con-bd {
    width: 654rpx;
    height: calc(90vh - 160rpx);
    padding: 8rpx 24rpx 0;
    margin-top: 24rpx;
    background: #FFFFFF;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .con-bd-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 110rpx;
  }

  .con-bd-item-name {
    width: 120rpx;
    height: 110rpx;
    text-align: left;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    line-height: 110rpx;
  }

  .con-bd-item-con {
    display: flex;
    align-items: center;
    width: calc(100% - 120rpx);
    height: 108rpx;
    border-bottom: 2rpx solid #F7F7F7;
  }

  .con-bd-item-con input {
    width: 100%;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 30rpx;
    margin-top: 3rpx;
  }

  .lable-item {
    width: 88rpx;
    height: 48rpx;
    margin-right: 18rpx;
    background: #FFFFFF;
    border-radius: 6rpx;
    border: 2rpx solid #E3E3E3;
    font-size: 24rpx;
    color: #333333;
    line-height: 48rpx;
    text-align: center;
  }

  .lable-item-on {
    background: #fba007 !important;
    border: 2rpx solid #fba007;
    color: #FFFFFF !important;
  }

  .con-bd-item-con2 input {
    width: 50%;
    height: 60rpx;
  }

  .con-bd-sex-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16rpx;
    font-size: 28rpx;
  }

  .choose-sex-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 12rpx;
  }

  .con-bd-agree {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 40rpx;
    width: 100%;
  }

  .agreeicon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 20rpx;
    margin-top: 2rpx;
  }

  .agreetext {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    line-height: 28rpx;
    color: #999999;
  }

  .con-ft-btn {
    width: 644rpx;
    height: 88rpx;
    margin-top: 94rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    line-height: 88rpx;
    text-align: center;
  }

  .con-ft-btn:last-child {
    margin-top: 32rpx;
  }

  .con-ft-btn1 {
    background: #fba007;
    color: #FFFFFF;
  }

  .con-ft-btn2 {
    background: #FFFFFF;
    border: 2rpx solid #DEDEDE;
    color: #666666;
  }

  .con-ft-btn3 {
    background: #DEDEDE;
    border: 2rpx solid #DEDEDE;
    font-size: 32rpx;
    color: #FFFFFF;
  }

  .input-placeholder {
    font-size: 28rpx;
    color: #999999;
  }
</style>